<template>
	<div class="listContainer">
		<div class="row row-cols-1 row-cols-md-6 g-4">
		  <div v-for="user in userList" class="col" :key="user.login" @click="openUserPage(user.html_url)">
		    <div class="card h-100">
		      <img height="200px" :src="user.avatar_url" class="card-img-top">
		      <div class="card-body">
		        <h5 class="card-title">{{user.login}}</h5>
		      </div>
		    </div>
		  </div>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				userList:[]
			}
		},
		methods:{
			showUsers(users){
				this.userList = users
			},
			openUserPage(url){
				window.open(url, "_blank" )
			}
		},
		mounted() {
			this.$bus.$on("searchResult",this.showUsers)
		}
	}
</script>

<style scoped>
	.listContainer{
		padding: 2%;
	}
</style>